Migrating from Privy to AppKit

If you’re migrating a React Privy dApp originally built with create-react-app, we recommend switching to Vite for improved performance and a better developer experience. You can check out our examples for a complete implementation using Vite + AppKit.

Follow the steps below to migrate from a default Privy project (using Next.js Pages) to an AppKit project with wagmi.

Step 1. Create a project in Reown Cloud

• Go to Reown Cloud.
• Create a new project and copy your Project ID — you’ll need it later.

Step 2. Install & uninstall libraries

Replace Privy dependencies with AppKit by running the following commands for your preferred package manager:

npm

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem && npm uninstall @privy-io/react-auth @privy-io/server-auth

Step 3. Update _app.tsx

To make AppKit Functional in a similar way, we need to replace the PrivyProvider with the combination of WagmiProvider and QueryClientProvider

1. Update Your Imports

- import { PrivyProvider } from "@privy-io/react-auth";
+ import { createAppKit } from '@reown/appkit/react'
+ import { WagmiProvider } from 'wagmi'
+ import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+ import { mainnet } from '@reown/appkit/networks'
+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

2. Configure AppKit Outside the Component

+ const projectId = "<YOUR_PROJECT_ID_FROM_STEP_1>"
+ const wagmiAdapter = new WagmiAdapter({ projectId, [mainnet] })

+ createAppKit({
+   adapters: [wagmiAdapter],
+  networks:  [mainnet],
+  projectId
+  features: {
+    analytics: true // Optional - defaults to your Cloud configuration
+  }
+ })

3. Wrap Your App With Providers

Update your component tree to use WagmiProvider and QueryClientProvider, and render the global appkit-button element:

-  <PrivyProvider ... >
+   <WagmiProvider config={wagmiAdapter.wagmiConfig}>
+        <QueryClientProvider client={queryClient}>
+            <appkit-button />
+        </QueryClientProvider>
+   </WagmiProvider>
-  </PrivyProvider appId="">

AppKit web components (like <appkit-button>) are global HTML elements — no imports are necessary.

Final notes

• Test your application thoroughly to ensure the migration has been successful and that all functionality is working as expected.
• Check our AppKit Web examples to compare with your implementation if you encounter issues.
• If you want to start from scratch, refer to the Installation docs here.